<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" th:href="@{/statics/css/calendar.css}">
		<link rel="stylesheet" th:href="@{/statics/css/healthinfo.css}" />
		<link rel="stylesheet" th:href="@{/statics/css/idangerous.swiper.css}" />
		<script th:src="@{/statics/plugins/chart/echarts.min.js}"></script>
		<script th:src="@{/statics/js/base/songo/idangerous.swiper.js}"></script>
		<script th:src="@{/statics/js/base/songo/score.js}"></script>
		<script th:src="@{/statics/js/base/songo/sleep.js}"></script>
		<script th:src="@{/statics/js/base/songo/sport.js}"></script>
		<script th:src="@{/statics/js/base/songo/organs.js}"></script>
		<script th:src="@{/statics/js/base/songo/spirit.js}"></script>
		<script th:src="@{/statics/js/base/songo/home.js}"></script>
		<script th:src="@{/statics/js/base/songo/link_use.js}"></script>
	</head>

	<body>
		<div id="dpLTE" class="container-fluid" v-cloak>
			<div class="bw">
				<div class="dbrl">

					<div class="section">
						<div class="dateBtn"><img th:src="@{/statics/images/calendar.png}"></div>
					</div>

				</div>
				<div style="clear: both;"></div>
				<div class="calendarBox">
					<div id="calendar" class="calendar"></div>
				</div>

				<div class="info_wh">
					<!-- 健康模块-->
					<div class="text_health">
						<a name="health" style="visibility:hidden;"></a>
						<!---->
						<div class="info_jh_tit">
							<!--健康值-->
							<div class="jh_tit_fs">
								<div class="img_icon"><img v-bind:src="user.headPortrait" /></div>
								<div class="one_info">
									<!--昵称，头像，性别，手机，id-->
									<ul>
										<li>昵称：<span>{{user.nickname}}</span></li>
										</li>
										<li>性别：<span>{{user.sex}}</span></li>
										<li>手机：<span>{{user.mobile}}</span></li>
										<li>松果ID：<span>{{user.sungoId}}</span></li>
										<li>年龄：<span>{{user.birthday}}</span></li>
									</ul>
								</div>
							</div>

							<!--四项评分-->
							<div class="jh_tit_pf">
								<p style="margin-top:-37px;">健康：<span class="home_health">—</span></p>
								<p>脏腑：<span class="home01">—</span></p>
								<p>精神：<span class="home02">—</span></p>
								<p>睡眠：<span class="home03">—</span></p>
								<p>运动：<span class="home04">—</span></p>
							</div>

							<!--我的状态和松果提示-->
							<div class="jh_tit_ts">
								<p>我的状态：<span class="home_wdzt"></span></p>
								<p>松果提示：</p>
								<ul id="home_sgts" class="home_sgts">

								</ul>
							</div>
						</div>
						<div style="clear: both;"></div>

						<div class="info_jh_echart">
							<div class="spirit_tit title_top">健康趋势分析</div>
							<div class="spirit_chart" id="score"></div>
						</div>
					</div>
				</div>
				<a name="spirit" style="visibility:hidden;"></a>
				<div class="text_spirit">
					<div class="js_fg">精神</div>
					<div class="info_js_tit">

						<div class="star bd12">
							<ul>
								<li class="cf">
									<span class="l">精神节律：</span>
									<div class="starShow l spirit_star0">
										<b></b>
										<!--on/on0-->
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
								<li class="cf">
									<span class="l">身心负荷：</span>
									<div class="starShow l spirit_star1">
										<b></b>
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
								<li class="cf">
									<span class="l">精神压力：</span>
									<div class="starShow l spirit_star2">
										<b></b>
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
								<li class="cf">
									<span class="l">疲劳指数：</span>
									<div class="starShow l spirit_star3">
										<b></b>
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
							</ul>
						</div>

						<div>
							<div>
								<h1 class="js_tit">精神状态提示</h1>
								<ol class="olState">
									<li></li>
								</ol>
							</div>

							<div>
								<div class="organ_radar spirit_xy">
									<div class="cardiac_now3">
										<div class="device">
											<a class="arrow-left3" href="#"></a>
											<a class="arrow-right3" href="#"></a>
											<div class="swiper-container hei">
												<div class="swiper-wrapper hs">
													<!--<div class="swiper-slide" style="width:100%">
											<div><b class="organs0_6">18:00</b></div>
											<ul class="wordage comBox mb24">
												<li class="comFlex js-modal-open3">
													<h2 class="js-modal-open3">身心负荷</h2>
													<h3 class="spirit0_1 js-modal-open3">---</h3>
												</li>
												<li class="comFlex js-modal-open4">
													<h2 class="js-modal-open4">精神压力</h2>
													<h3 class="spirit0_2 js-modal-open4">---</h3>
												</li>

												<li class="comFlex js-modal-open5">
													<h2 class="js-modal-open5">疲劳指数</h2>
													<h3 class="spirit0_3 js-modal-open5">---</h3>
												</li>

											</ul>
										</div>-->
												</div>
												<div class="pagination"></div>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="spirit_tit">精神状态分析</div>
					<div class="echart_buttom">
						<div class="spirit_chart" id="spirit0"></div>
					</div>

					<div class="spirit_tit title_top">昼夜节律</div>
					<div>
						<div class="spirit_chart" id="spirit1"></div>
					</div>
					<div>
						<ul class="spirit_sj">
							<li class="comFlex">
								<h2>睡眠基准心率: <span><b class="spirit1_1">---</b>bpm</span></h2>

							</li>
							<li class="comFlex">
								<h2>日间平均心率: <span><b class="spirit1_2">---</b>bpm</span></h2>

							</li>
							<li class="comFlex">
								<h2>昼夜心率差: <span><b class="spirit1_3">---</b>bpm</span></h2>

							</li>
						</ul>
					</div>

					<div style="clear: both;"></div>
					<div class="spirit_tit title_top">昼夜节律</div>
					<div>
						<div class="spirit_chart" id="spirit2"></div>
					</div>
				</div>

				<a name="organs" style="visibility:hidden;"></a>
				<div class="text_spirit">
					<div class="js_fg">脏腑</div>
					<div class="organs_tit">
						<div class="info_zf_tit titbuttom">
							<div class="star bd12">
								<ul>
									<li class="cf">
										<span class="l">脏腑功能：</span>
										<div class="starShow l organs_star0">
											<b></b>
											<b></b>
											<b></b>
											<b></b>
											<b></b>
										</div>
									</li>
									<li class="cf">
										<span class="l">脏腑平衡：</span>
										<div class="starShow l organs_star1">
											<b></b>
											<b></b>
											<b></b>
											<b></b>
											<b></b>
										</div>
									</li>
								</ul>
							</div>
							<div>
								<h1 class="js_tit">脏腑状态提示</h1>
								<ol class="olState_zf">
									<li></li>
								</ol>
							</div>
							<div style="clear: both;"></div>
						</div>

						<div style="height: 450px;">
							<div class="unEmpty dn">
								<div class="organ_radar">
									<div class="cardiac_btn">
										<h1 class="dn"></h1>
										<div class="cf">
											<span></span>
											<b class="dayShow"></b>
											<b class="nowShow on"></b>
											<span></span>
										</div>
									</div>
									<div style="clear: both;"></div>
									<div class="cardiac_day">
										<div style="height: 400px;width: 900px;" id="organs0"></div>
									</div>
									<div class="cardiac_now">
										<div class="device">
											<a class="arrow-left" href="#"></a>
											<a class="arrow-right" href="#"></a>
											<div class="swiper-container xue">
												<div class="swiper-wrapper hh">
												</div>
											</div>
											<div class="pagination"></div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<ul class="spirit_sj">
							<li class="comFlex">
								<h2>呼吸率: <span><b class="organs0_1">---</b>次/分</span></h2>
							</li>
							<li class="comFlex">
								<h2>静息心率: <span><b class="organs0_2">---</b>次/分</span></h2>
							</li>
							<li class="comFlex">
								<h2>心脏功能: <span class="organs0_3">---</span></h2>
							</li>
						</ul>
						<div style="clear: both;"></div>
						<div class="spirit_tit title_top">健康趋势分析图:</div>
						<div class="unEmpty dn">
							<div class="spirit_chart" id="organs1"></div>
						</div>

						<div class="cardiac sun_wrap2">
							<div class="spirit_tit title_top">血压趋势分析:</div>

							<div class="js-modal-open6">
								<div class="organ_radar">
									<div class="cardiac_now2">
										<div class="device">
											<a class="arrow-left2" href="#"></a>
											<a class="arrow-right2" href="#"></a>
											<div class="swiper-container huhu">
												<div class="swiper-wrapper ha">

												</div>
												<div class="pagination"></div>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="spirit_tit title_top">血压趋势分析:</div>
							<div class="unEmpty dn">
								<div class="spirit_chart" id="organs2"></div>
							</div>

						</div>
					</div>
				</div>

				<!--运动-->
				<a name="sport" style="visibility:hidden;"></a>
				<div class="text_sport">
					<div class="js_fg">运动</div>
					<div class="sport_tit titbuttom">
						<div class="star bd12">
							<ul>
								<li class="cf">
									<span class="l">运动时段：</span>
									<div class="starShow l sport_star1">
										<b></b>
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
								<li class="cf">
									<span class="l">运动总量：</span>
									<div class="starShow l sport_star2">
										<b></b>
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
								<li class="cf">
									<span class="l">运动强度：</span>
									<div class="starShow l sport_star3">
										<b></b>
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
							</ul>
						</div>
						<div>
							<div>
								<h1 class="js_tit">运动状态提示</h1>
								<ol class="olState_yd">
									<li></li>
								</ol>
							</div>
							<ul class="js_pf">
								<li class="comFlex">
									<h2>总步数: <span><b class="sport0_1">---</b>步</span></h2>
								</li>
								<li class="comFlex">
									<h2>有效运动时长: <span><b class="sport0_2">---</b>小时<b class="sport0_3">---</b>分钟</span></h2>
								</li>
								<li class="comFlex">
									<h2>有效运动步数: <span><b class="sport0_4">---</b>步</span></h2>
								</li>
							</ul>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="sport_msg">
						<div class="spirit_tit title_top">运动状态和心率统计:</div>
						<div>
							<div class="spirit_chart" id="sport0"></div>
						</div>
						<div class="spirit_tit title_top">运动趋势分析:</div>
						<div>
							<div class="spirit_chart" id="sport1"></div>
						</div>
					</div>
				</div>

				<!--睡眠-->
				<a name="sleep" style="visibility:hidden;"></a>
				<div class="text_sleep">
					<div class="js_fg">睡眠</div>
					<div class="sleep_tit">
						<div class="star bd12">
							<ul>
								<li class="cf">
									<span class="l">睡眠时间：</span>
									<div class="starShow l sleep_star0">
										<b></b>
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
								<li class="cf">
									<span class="l">睡眠时长：</span>
									<div class="starShow l sleep_star1">
										<b></b>
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
								<li class="cf">
									<span class="l">睡眠质量：</span>
									<div class="starShow l sleep_star2">
										<b></b>
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
								<li class="cf">
									<span class="l">入睡速度：</span>
									<div class="starShow l sleep_star3">
										<b></b>
										<b></b>
										<b></b>
										<b></b>
										<b></b>
									</div>
								</li>
							</ul>
						</div>
						<div>
							<div>
								<h1 class="js_tit">睡眠状态提示</h1>
								<ol class="olState_sm">
									<li></li>
								</ol>
							</div>
							<ul class="js_pf sleep_h">
								<li class="comFlex">
									<h2>深睡: <span class=""><b class="sleep0_1">---</b>时<b class="sleep0_2">---</b>分</span></h2>
								</li>
								<li class="comFlex">
									<h2>浅睡: <span class=""><b class="sleep0_3">---</b>时<b class="sleep0_4">---</b>分</span></h2>
								</li>
								<li>
									<h2>异常: <span class=""><b class="sleep0_5">---</b>时<b class="sleep0_6">---</b>分</span></h2>
								</li>
							</ul>
						</div>

						<div style="clear: both;"></div>
					</div>
					<div class="sleep_msg">
						<div class="spirit_tit title_top">睡眠状态:</div>
						<div class="sleep_wrap">
							<div class="spirit_chart" id="sleep3"></div>
							<div class="spirit_chart" id="sleep0"></div>
						</div>
						<div class="spirit_tit title_top">睡眠趋势分析:</div>
						<div class="unEmpty dn">
							<div class="spirit_chart" id="sleep1"></div>
						</div>
					</div>
				</div>

				<div class="side_bar">
					<div class="jdm-toolbar">
						<a href="#spirit">
							<div class="bar">
								<i class="tab-tip"></i>
								<!-- 红色小点 -->
								<span class="tab-text">精神</span>
								<!-- 鼠标移上的内容-->
								<i class="tab-icn tab-icn-vip"></i>
								<!-- 小图标 -->
							</div>
						</a>
						<a href="#organs">
							<div class="bar">
								<span class="tab-text">脏腑</span>
								<!-- 鼠标移上的内容-->
								<i class="tab-icn tab-icn-cart"></i>
								<!-- 小图标 -->
							</div>
						</a>
						<a href="#sport">
							<div class="bar">
								<span class="tab-text">运动</span>
								<!-- 鼠标移上的内容-->
								<i class="tab-icn tab-icn-focus"></i>
								<!-- 小图标 -->
							</div>
						</a>
						<a href="#sleep">
							<div class="bar">
								<span class="tab-text">睡眠</span>
								<!-- 鼠标移上的内容-->
								<i class="tab-icn tab-icn-msg"></i>
								<!-- 小图标 -->
							</div>
						</a>
						<a href="#health">
							<div class="bar">
								<span class="tab-text">返回顶部</span>
								<!-- 鼠标移上的内容-->
								<i class="tab-icn tab-icn-jimi"></i>
								<!-- 小图标 -->
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	<div th:include="include/footer_js::footer"></div>
	<script th:src="@{/statics/js/base/songo/calendar.js}"></script>
	<script th:src="@{/statics/js/base/songo/date.js}"></script>
	<script th:src="@{/statics/js/base/songo/healthinfo.js}"></script>

	</html>